<template>
  <div class="ceshi">
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
      :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">{{ type == 'lot' ? '拍品详情' : '商品详情' }}</div>
      </template>

      <div class="hm-form-item-box1">
        <div class="hm-form-title" style=" position: relative; ">基本信息</div>

        <el-row class="hm-row3 mb96" :gutter="60">
          <div style="margin-left: 30px">
            <image-preview :src="commoditydetailsData.productImage" :width="380" :height="260" />
          </div>
          <el-col :span="13">
            <div class="div_flex">
              <div class="div_flex_items">
                <div class="label">商品名称：</div>
                <div class="value">{{ commoditydetailsData.styleName }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">商品类目：</div>
                <div class="value">{{ commoditydetailsData.categoryName }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">商品编码：</div>
                <div class="value">{{ commoditydetailsData.styleCode }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">库存编码：</div>
                <div class="value">{{ }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">品牌：</div>
                <div class="value">{{ commoditydetailsData.brandName }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">贸易方式：</div>
                <div class="value">{{ commoditydetailsData.tradeMode }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">出库次数：</div>
                <div class="value">{{ }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">对接群名：</div>
                <div class="value">{{ commoditydetailsData.groupName || '-' }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">招商员：</div>
                <div class="value">{{ }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">供应商：</div>
                <div class="value">{{ commoditydetailsData.supplierName }}</div>
              </div>
              <div class="div_flex_items">
                <div class="label">库存数量：</div>
                <div class="value">{{ }}</div>
              </div>
              <div class="div_flex_item">
                <div class="label">卖点：</div>
                <div class="value">{{ commoditydetailsData.sellingPoints }}</div>
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="hm-form-title">{{ type == 'lot' ? '商品售卖信息' : '本次合作信息' }}</div>
        <el-row class="hm-row3 mb96" :gutter="120">
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item width="33%" label="合作方式：">{{ handleFilters(commoditydetailsData.cooperationMode,
                hm_cooperation_mode)
                }}</el-descriptions-item>
              <el-descriptions-item label="商家名称："> {{ commoditydetailsData.supplierName }}</el-descriptions-item>
              <el-descriptions-item label="招商员：">{{ commoditydetailsData.recruiter }}</el-descriptions-item>
              <el-descriptions-item label="直播机制：">
                <el-tag size="small">{{ commoditydetailsData.liveStreamingMechanism }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="佣金：">{{ commoditydetailsData.commission }}</el-descriptions-item>
              <el-descriptions-item label="成本价：">{{ commoditydetailsData.costPrice }}</el-descriptions-item>
              <el-descriptions-item label="店铺名称：">{{ commoditydetailsData.storeName }}</el-descriptions-item>
              <el-descriptions-item label="规格/材质：">{{ commoditydetailsData.specs }}</el-descriptions-item>
              <el-descriptions-item label="工厂名称：">{{ commoditydetailsData.factoryName }}</el-descriptions-item>
              <el-descriptions-item label="选品部门：" v-if="type == 'anchor'">{{
                handleFilters(commoditydetailsData.choosePerson,
                  hm_anchor)
              }}</el-descriptions-item>
              <el-descriptions-item v-if="type !== 'anchor'" :label="type == 'lot' ? '拍品信息：' : '意向主播：'">{{
                handleFilters(commoditydetailsData.likePerson, hm_anchor)
              }}</el-descriptions-item>
              <el-descriptions-item label="选品意见：" v-if="type == 'anchor'">{{ commoditydetailsData.chooseView
                }}</el-descriptions-item>
              <el-descriptions-item label="样品状态" v-if="type == 'anchor'">{{
                auditStatusNameById(commoditydetailsData.auditStatus) }}</el-descriptions-item>
            </el-descriptions>
            
          </el-col>
        </el-row>
        <div class="hm-form-title" v-if="type == 'lot'">拍品信息</div>
        <el-row class="hm-row3 mb96" :gutter="120" v-if="type == 'lot'">
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item label="下单时间">{{ commoditydetailsData.placeAnOrderTime }}</el-descriptions-item>
              <el-descriptions-item label="收货时间">{{ commoditydetailsData.receivingTime }}</el-descriptions-item>
              <el-descriptions-item label="拍品支出">{{ commoditydetailsData.lotPay }}</el-descriptions-item>
              <el-descriptions-item label="转寄支出">{{ commoditydetailsData.forwardPay }}</el-descriptions-item>
              <el-descriptions-item label="退货日期">{{ commoditydetailsData.returnsTime }}</el-descriptions-item>
              <el-descriptions-item label="退货单号">{{ commoditydetailsData.returnsNo }}</el-descriptions-item>
              <el-descriptions-item label="退货状态">{{ commoditydetailsData.returnsStatus == '0' ? '未退货' : '已退货'
                }}</el-descriptions-item>
              <el-descriptions-item label="是否售后">{{ commoditydetailsData.afterSales == '0' ? '是' : '否'
                }}</el-descriptions-item>
              <el-descriptions-item label="退款收入">{{ commoditydetailsData.refundIncome }}</el-descriptions-item>
              <el-descriptions-item label="拍品检测结果">{{ commoditydetailsData.lotTestResult == '0' ? '合格' : '不合格'
                }}</el-descriptions-item>
              <el-descriptions-item label="订单截图">
                <image-preview :src="commoditydetailsData.orderScreenshot" :width="40" :height="40" />
              </el-descriptions-item>
              <el-descriptions-item label="收货截图">
                <image-preview :src="commoditydetailsData.testProductReceivingImg" :width="40" :height="40" />
              </el-descriptions-item>
              <el-descriptions-item label="拍品对比图">
                <image-preview :src="commoditydetailsData.contrastImg" :width="40" :height="40" />
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script setup name="Commoditydetails" lang="ts">
/**
 * type == 'anchor' 选品记录详情
 * type == 'lot' 拍品记录详情
 * type == '' 默认 样品管理详情
 * type == 'removalRecord' 下架商品记录详情
 */
import { auditStatusNameById } from '@/utils/auditStatusFilter'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_anchor } = toRefs<any>(proxy?.useDict('hm_anchor'));
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));


const props = defineProps({
  commoditydetailsData: {
    type: Object,
    default: ''
  },
  dialogInfoVisible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: false
  }
});
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
  emits('doClose')
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
  margin-bottom: 10px;
}

.div_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #606266;
  min-height: 100%;

  .div_flex_items {
    width: 50%;
    display: flex;
    align-items: flex-start;
    min-height: 13%;
  }

  .div_flex_item {
    width: 100%;
    display: flex;
    align-items: flex-start;
  }

  .label {
    width: 100px;
  }

  .value {
    width: calc(100% - 100px);
  }
}

.hm-box-title {
  font-weight: 600;
  font-size: 21px;
  color: #1A1B1C;
  padding-bottom: 24px;
  border-bottom: 1px solid #f3f3f7;
}

:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
}

.mb96 {
  margin-bottom: 20px;
}

:deep(.el-descriptions) {
  height: 100%;
}

:deep(.el-descriptions__body) {
  height: 100%;
}

:deep(.el-descriptions__table) {
  height: 100%;
}
</style>
